<template>
  <div>
    <div>
      <div class="main1" ref="chart1"></div>
    </div>
    <div>
      <div class="main" ref="chart2"></div>
    </div>
    <div>
      <div class="main" ref="chart3"></div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "baseEcharts",
  data() {
    return {
      //柱状图数据
      echarts1: {
        title: {
            text: '2021年机构月收入统计柱状图（单位：/万元）',
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['收入', '支出']
        },
        calculable: true,
        xAxis: {
            //type坐标轴类型。'category' 类目轴
            type: "category",
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            //'value' 数值轴，适用于连续数据。
            type: "value",
        },
        series: [
            {
              name: '收入',
              type: 'bar',
              data: [112.0, 124.9, 132.3, 129.2, 125.6, 116.7, 115.6, 114.2, 113.6, 118.0, 119.4, 113.3],
              markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '支出',
              type: 'bar',
              data: [101.6, 108.9, 111.9, 110.4, 108.7,105.7, 108.6, 102.2, 104.7, 108.8, 106.0, 102.3],
              markPoint: {
                  data: [
                      {name: '年最高', value: 111.9, xAxis: 2, yAxis: 112},
                      {name: '年最低', value: 101.6, xAxis: 0, yAxis: 102}
                  ]
              },
              markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ]
              }
          }
        ],
      },
      echarts2: {
        //标题
        title: {
            text: "2021年机构老人年龄分布玫瑰图",
        },
        //legend.top图例组件离容器上侧的距离。
        legend: {
            top: "bottom",
        },
        //toolbox.show是否显示工具栏组件。
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: false },
        //     //数据视图
        //     dataView: { show: true, readOnly: false },
        //     //刷新按钮
        //     restore: { show: true },
        //     //下载按钮
        //     saveAsImage: { show: true },
        //   },
        // },
        series: [
            {
                //name: "面积模式",
                //type表示图的类型
                type: "pie",
                //radius前面的值表示内圆大小，后面的表示外圆大小
                radius: [25, 150],
                //文本对齐
                center: ["50%", "50%"],
                //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                //'area' 所有扇区圆心角相同，仅通过半径展现数据大小
                roseType: "radius",
                itemStyle: {
                //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
                borderRadius: 8,
                },
                //数据
                data: [
                    { value: 28, name: "50岁-60岁" },
                    { value: 38, name: "60岁-70岁" },
                    { value: 32, name: "70岁-80岁" },
                    { value: 22, name: "80岁-90岁" },
                ],
            },
        ],
      },
      //环形图
      echarts3: {
        //标题
        title: {
            text: "2021年机构部门员工分布环形图",
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
        //   top: "5%",
        //   left: "center",
            top: "bottom",
        },
        series: [
            {
                name: "机构部门",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: "center",
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: "40",
                        fontWeight: "bold",
                    },
                },

                labelLine: {
                    show: false,
                },
                data: [
                    { value: 2, name: "院长" },
                    { value: 6, name: "财务部" },
                    { value: 8, name: "接待部" },
                    { value: 10, name: "人事部" },
                    { value: 12, name: "行政部" },
                    { value: 14, name: "保卫部" },
                    { value: 22, name: "后勤部" },
                    { value: 38, name: "护理部" },
                ],
            },
        ],
      },

    };
  },
  mounted() {
    //charts1
    echarts.init(this.$refs.chart1).setOption(this.echarts1);
    //charts2
    echarts.init(this.$refs.chart2).setOption(this.echarts2);
    //charts3
    echarts.init(this.$refs.chart3).setOption(this.echarts3);
    // let mychart = echarts.init(this.$refs.chart2);
    //延时显示图表
    // mychart.showLoading();
    // setTimeout(function () {
    //   let self = this;
    //   self.data = {
    //     series: [
    //       {
    //         name: "访问来源",
    //         type: "pie",
    //         radius: "55%",
    //         roseType: "angle",
    //backgroundColor: "#2c343c",
    // itemStyle: {
    //   // 阴影的大小
    //   shadowBlur: 200,
    //   // 阴影水平方向上的偏移
    //   shadowOffsetX: 30,
    //   // 阴影垂直方向上的偏移
    //   shadowOffsetY: 40,
    //   emphasis: { shadowBlur: 800 },
    //   // 阴影颜色
    //   shadowColor: "rgba(0, 0, 0, 0.5)",
    // },
    // textStyle: {
    //   color: "rgba(255, 255, 255, 0.3)",
    // },
    // labelLine: {
    //   lineStyle: {
    //     color: "rgba(255, 255, 255, 0.3)",
    //   },
    // },
    // // 高亮样式。
    // emphasis: {
    //   itemStyle: {
    //     // 高亮时点的颜色。
    //     color: "blue",
    //   },
    //   label: {
    //     show: true,
    //     // 高亮时标签的文字。
    //     color: "black",
    //   },
    // },
    //         data: [
    //           { value: 235, name: "视频广告" },
    //           { value: 274, name: "联盟广告" },
    //           { value: 310, name: "邮件营销" },
    //           { value: 335, name: "直接访问" },
    //           { value: 400, name: "搜索引擎" },
    //         ],
    //       },
    //     ],
    //   };
    //   mychart.hideLoading();
    //   mychart.setOption(this.data);
    // }, 1000); //3000代表3s延迟
  },
};
</script>

<style scoped>
.main {
  width: 600px;
  height: 400px;
  float: left;
  margin: 50px 10px 0px;
}
.main1 {
  width: 1200px;
  height: 600px;
  float: left;
  margin-top: 50px;
}
</style>
